<template>
    <div>
        <div class="menu_aside"> 
            <el-menu
                default-active="2"
                class="el-menu-vertical-demo"
                @open="handleOpen"
                @close="handleClose"
                router
            >   
            <el-submenu index="1">
                <template slot="title">
                    <i class="el-icon-location"></i>
                    <span>学生信息录入及查询</span>
                </template>
                <el-menu-item index="/home/stuInfoEntry">学生信息录入</el-menu-item>
                <el-menu-item index="/home/stuInfoSelect">学生信息查询</el-menu-item>
            </el-submenu>
            <el-menu-item index="2">
                <i class="el-icon-menu"></i>
                <span slot="title">导航二</span>
            </el-menu-item>
            <el-menu-item index="3">
                <i class="el-icon-document"></i>
                <span slot="title">导航三</span>
            </el-menu-item>
            <el-menu-item index="4">
                <i class="el-icon-setting"></i>
                <span slot="title">导航四</span>
            </el-menu-item>
            </el-menu>
        </div>
    </div>
</template>


<script>
import { Menu,MenuItem,Submenu} from "element-ui";
export default {
    components:{
        "el-menu":Menu,
        "el-menu-item":MenuItem,
        "el-submenu":Submenu,
    },
    methods:{
        handleOpen(key,keyPath) {
            console.log(key,keyPath);
        },
        handleClose(key,keyPath) {
            console.log(key,keyPath);
        },
    }
};
</script>

<style lang="less">
div {
  .menu_aside {
    font-size: 50px;
  }
}
</style>